<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-22 11:09:25
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-24 12:02:10
-->
<template>
    <div class="followInfo">
        <el-timeline>
            <el-timeline-item v-for="(item, index) in  message " :timestamp="item.data" placement="top" color="skyblue">
                <el-card :key="index">
                    <div class="center">
                        <div class="cardleft">
                            <div class="icon">
                                <i class="iconfont icon-zhuye"></i>
                                <span>{{ item.name }}</span>
                                <el-button type="info" size="small" disabled>Info</el-button>
                            </div>
                            <div>跟进记录：{{ item.text }}</div>
                        </div>
                        <div class="cardright">
                            <el-button>新增备注</el-button>
                        </div>
                    </div>
                </el-card>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>
  
<script setup lang="ts">
import { ref } from "vue";

interface IProps {
    dialogtrue: (value: boolean) => void
    message: Array<{ data: string; name: string; text: string }>;
}

// Define props
const props = defineProps<IProps>();
</script>
  
<style lang="scss" scoped>
.followInfo {
    height: 100%;
    width: 100%;

    .el-timeline-item__tail {
        background-color: blue;
    }

    .el-timeline-item__content {
        width: 100%;

        .el-card {
            width: 100%;
            background-color: #f2f2f2;
        }
    }
}

.center {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .cardleft {
        .icon {
            margin-bottom: 20px;

            i {
                margin-left: 0px;
            }

            span {
                margin-left: 20px;
            }

            .el-button {
                margin-left: 20px;
            }
        }
    }
}

.el-timeline-item__tail {
    background-color: red;
}
</style>
  